<template>
    <div class="zsdx-time-line">
        <div class="time-line-title">六年深耕校园,铸就多项第一</div>
        <ul class="timeline-list">
            <li
                v-for="(item, index) in timeLine"
                :key="index"
                class="timeline-item"
            >
                <div class="time">
                    <div class="time-dot-container">
                        <div class="dot-container-2">
                            <div class="dot-container-3"></div>
                        </div>
                    </div>
                    <div class="time-text">{{ item.time }}</div>
                </div>
                <div class="time-title">{{ item.event }}</div>
                <div
                    class="time-cover"
                    :style="'background-image: url(' + item.image + ')'"
                ></div>
            </li>
        </ul>
        <div class="more-event-btn" @click="fnShowMore">
            <a href="javascript:;" class="more-button">{{
                showMore ? '收起更多' : '查看更多'
            }}</a>
            <div
                class="more-arrow"
                :class="showMore ? 'opsition-arrow' : ''"
            ></div>
        </div>
    </div>
</template>

<script>
const dataList = [
    {
        time: '2013.04',
        event: '掌上大学成立',
        image: '//cdn.zsdx.cn/zsdx-website/2020mobile/images/2013_index.png'
    },
    {
        time: '2014.06',
        event: '美国 solidworks 天使轮融资',
        image: '//cdn.zsdx.cn/wei/images/new_home_mobile/index/2014.06.png'
    },
    {
        time: '2015.06',
        event: '青松基金 pre-A 轮融资',
        image: '//cdn.zsdx.cn/wei/images/new_home_mobile/index/2015.06.jpg'
    },
    {
        time: '2016.08',
        event: '成立高校大数据研究院',
        image: '//cdn.zsdx.cn/wei/images/new_home_mobile/index/2016.08.jpg'
    },
    {
        time: '2016.09',
        event: '杭州市雏鹰企业',
        image: '//cdn.zsdx.cn/wei/images/new_home_mobile/index/hangzhoushi.jpg'
    },
    {
        time: '2017.01',
        event: '撰写高校第一个《高校新媒体蓝皮书》',
        image: '//cdn.zsdx.cn/wei/images/new_home_mobile/index/2017.01.jpg'
    },
    {
        time: '2017.02',
        event: '赛伯乐A轮融资',
        image: '//cdn.zsdx.cn/wei/images/new_home_mobile/index/2017.02.jpg'
    },
    {
        time: '2017.08',
        event: '召开“中国高校第一次新媒体行业峰会”',
        image: '//cdn.zsdx.cn/wei/images/new_home_mobile/index/2017.08.jpg'
    },
    {
        time: '2018.08',
        event: '创始人张良玉获得福布斯中国30 Under 30',
        image: '//cdn.zsdx.cn/wei/images/new_home_mobile/index/2018.08.jpg'
    },
    {
        time: '2018.09',
        event: '掌上大学荣获“国家级高新企业”',
        image: '//cdn.zsdx.cn/wei/images/new_home_mobile/index/2018.09.jpg'
    },
    {
        time: '2019.07',
        event: '掌上大学CEO张良玉入选2019杭州大学生杰出创业人才',
        image: '//cdn.zsdx.cn/wei/images/new_home_mobile/index/2018.10.jpg'
    },
    {
        time: '2019.09',
        event: '掌上大学CEO 荣登《2019胡润under30s创业领袖》',
        image: '//cdn.zsdx.cn/wei/images/new_home_mobile/index/2019.07.jpg'
    }
]

export default {
    name: 'ZsdxTimeLine',
    data() {
        return {
            showMore: false,
            timeLine: []
        }
    },
    created() {
        this.timeLine = dataList.slice(0, 3)
    },
    methods: {
        fnShowMore() {
            this.showMore = !this.showMore
            if (this.showMore) {
                this.timeLine = dataList
            } else {
                this.timeLine = dataList.slice(0, 3)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.zsdx-time-line {
    background: #fff;
    margin-top: 0.8rem;
    border-radius: 0.32rem 0.32rem 0 0;
    padding: 0.4rem;
    .time-line-title {
        font-size: 0.4rem;
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        line-height: 0.56rem;
    }
    .timeline-list {
        .timeline-item {
            position: relative;
            padding-bottom: 0.4rem;
            &:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0.1rem;
                bottom: -0.4rem;
                width: 1px;
                background: #eeeeee;
            }
            &:last-child {
                &:before {
                    content: '';
                    bottom: 0.3rem;
                }
            }
            .time {
                display: flex;
                align-items: center;
                .time-dot-container {
                    position: absolute;
                    left: -0.14rem;
                    top: 0.1rem;
                    width: 0.28rem;
                    height: 0.28rem;
                    border: 0.04rem solid rgba(5, 107, 242, 0.4);
                    border-radius: 50%;
                    .dot-container-2 {
                        width: 100%;
                        height: 100%;
                        border: 0.04rem solid rgba(5, 107, 242, 0.6);
                        border-radius: 50%;
                        .dot-container-3 {
                            width: 100%;
                            height: 100%;
                            border: 0.04rem solid rgba(5, 107, 242, 0.8);
                            border-radius: 50%;
                            background: rgba(5, 107, 242, 1);
                        }
                    }
                }
                .time-text {
                    font-size: 0.32rem;
                    font-weight: bold;
                    color: rgba(102, 102, 102, 1);
                    line-height: 0.48rem;
                    padding-left: 0.36rem;
                }
            }
            .time-title {
                font-size: 0.28rem;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 0.36rem;
                padding-left: 0.36rem;
                margin-top: 0.12rem;
                margin-bottom: 0.1rem;
            }
            .time-cover {
                width: 4.4rem;
                height: 2.61rem;
                margin-left: 0.36rem;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center center;
            }
        }
    }
    .more-event-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        .more-button {
            font-size: 0.28rem;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            margin-right: 0.1rem;
        }

        .more-arrow {
            width: 0.28rem;
            height: 0.28rem;
            background-image: url('//cdn.zsdx.cn/wei/images/new_home_mobile/index/arrowDown.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            transition: 0.3s;
        }
        .opsition-arrow {
            transform: rotate(180deg);
        }
    }
}
</style>
